<template>
	<view>
		<view style="width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;z-index: 10;" @click="roomsid = null"
			v-if="roomsid"></view>
		<view class="home-wrap u-m-b-20"
			:style="{ background: 'linear-gradient( 195deg, #F7CEBD 0%, #F5F6FA 100%) no-repeat', 'background-size': '100% 61%', 'max-height': '800rpx', 'min-height': '800rpx', }">
			<landlord-navbar :isBack="false" :background="{ background: 'transparent' }">
				<text slot="content" style="color: #000;width: 100%;text-align: center;padding-left: 20rpx;  ">
					{{ "房源管理" }}
				</text>
			</landlord-navbar>
			<!-- 搜索框 -->
			<view class="search-box">
				<u-search v-model="keyword" placeholder="请输入关键字搜索" :showAction="false" shape="round" :clearabled="true"
					height="72rpx" @change="Searchs">
					<template #prefix>
						<u-icon name="search" size="32" color="#999"></u-icon>
					</template>
				</u-search>
			</view>
			<!-- 选择楼栋 -->
			<!-- <view class="search-box"><u-picker  :show="show"  :columns="buildingsList"  keyName="label"  @cancel="show = false"  @confirm="buildingsListclick"></u-picker><view class="buildings-button" @click="optionlistclick">  <view class="">{{ selectBuildingsName }}  </view>  <u-icon:name="show == true ? 'arrow-up-fill' : 'arrow-down-fill'"size="14"color="#000"></u-icon></view> </view> -->
			<view class="search-box">
				<u-picker :show="show" :columns="buildingsList" keyName="label" @cancel="show = false"
					@confirm="buildingsListclick"></u-picker>
				<view class="buildings-button" @click="optionlistclick">
					<view class="">
						{{ selectBuildingsName }}
					</view>
					<u-icon :name="show == true ? 'arrow-up-fill' : 'arrow-down-fill'" size="14" color="#000"></u-icon>
				</view>
			</view>
			<!-- 出租信息 -->
			<view class="content-box">
				<view class="u-content u-p-10  ">
					<view class="u-content-nav">
						<!-- @click="jump('/pages-landlord/house/houseBill?id=' + 2)" -->
						<view class="u-flex u-flex-column u-flex-items-center">
							<view class="u-content-nav-money">{{ statdata.rented }}</view>
							<view class="u-content-nav-title">已出租</view>
						</view>
						<!-- @click="jump('/pages-landlord/house/houseBill?id=' + 3)" -->
						<view class="u-flex u-flex-column u-flex-items-center">
							<view class="u-content-nav-money">{{ statdata.publish }}</view>
							<view class="u-content-nav-title">发布中</view>
						</view>
						<!-- @click="jump('/pages-landlord/house/houseBill?id=' + 1)" -->
						<view class="u-flex u-flex-column u-flex-items-center">
							<view class="u-content-nav-money">{{ statdata.not_rented }}</view>
							<view class="u-content-nav-title">未出租</view>
						</view>
						<view class="u-flex u-flex-column u-flex-items-center">
							<view class="u-content-nav-money">{{ statdata.rate }}</view>
							<view class="u-content-nav-title">出租率</view>
						</view>
					</view>
				</view>
				<!--楼层信息-->
				<view class="  floorinformation" v-for="(item, idx) in buildinglists" :key="idx">
					<!-- 楼层头部 -->
					<view class="u-flex u-flex-items-center floorinformation-top" @click.stop="toggleCollapse(idx)">
						<view class="u-flex u-flex-items-center" style="width: 60%">
							<text
								style="font-weight: 600; width: 60%;overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
								{{ item.name }}
							</text>
							<text style="font-size: 30rpx; color: #ccc; margin: 0 10rpx">|
							</text>
							<text class="floorinformation-topSize">
								共{{ item.rooms.length }}间
							</text>
							<view style="margin-left: 10rpx;padding: 10rpx">
								<u-icon :name="item.collapsed ? 'arrow-up' : 'arrow-down'" size="12"
									color="#000"></u-icon>
							</view>
						</view>
						<view class="u-flex u-flex-items-center">
							<view style="font-size: 18rpx;color: #A3C616;margin-right: 10rpx">已签： {{ item.signed }}
							</view>
							<view style="font-size: 18rpx;color: #2FAA4E;margin-right: 10rpx">待签： {{ item.wait_sign }}
							</view>
							<view class="iccon-box" @click="fangclick(item)">
								<u-icon name="plus" size="20" color="#000"></u-icon>
							</view>
							<!-- <view class="iccon-box">
								<u-icon name="list" size="20" color="#000"></u-icon>
							</view> -->
						</view>
					</view>
					<!-- 楼层信息 -->
					<view v-show="!item.collapsed">
						<view class="floorinformation-floor" v-for="(items, indexs) in item.roomGroups" :key="indexs">
							<view class="" @click.stop="toggleCollapse1(items, indexs)">
								<view class="u-flex u-flex-items-center top">
									{{ items.floor_no }}层
									<view style="margin-left: 10rpx;padding: 10rpx">
										<u-icon :name="items.collapsed ? 'arrow-up' : 'arrow-down'" size="12"
											color="#000"></u-icon>
									</view>
								</view>
								<view class="u-flex u-flex-items-center box" v-if="!items.collapsed">
									<view style="margin-bottom: 20rpx"
										:class="itemss.status == 3 ? 'box-sex sign' : itemss.house_status == 1 ? 'box-sex up' : 'box-sex'"
										v-for="(itemss, indexss) in items.list" :key="indexss"
										@click.stop="stateShowclick(itemss)">
										<view class="Information">{{ itemss.name }}</view>
										<view class="Information-name" v-if="itemss.status == 3">已出租</view>
										<view class="Information-name" v-else-if="itemss.house_status == 2">未上架</view>
										<view class="Information-name" v-else-if="itemss.house_status == 1">已上架</view>
										<view class="Information-name" v-else>{{ itemss.status_text }}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="height: 200rpx"></view>
		</view>
		<!-- 提示框 -->
		<!-- @confirm="changeSelectState" -->
		<u-modal :show="stateShow" :showCancelButton="true" :showConfirmButton="false" :closeOnClickOverlay="true"
			confirmColor="#FE4F04" @close="stateShow = false" @cancel="stateShow = false" cancelText="关闭" :title="title">
			<view class="slot-content">
				<!-- 标题 -->
				<view style="text-align: center; font-weight: 600; margin-bottom: 20rpx">
					房间状态
				</view>
				<!-- 选项 -->
				<view class="choose-box">
					<view class="listbox" :class="stateindex == item.id ? 'listbox1' : ''" v-for="item in chooseList"
						:key="item.id" @click="Selected(item.id)">
						<image class="choose-img" :src="stateindex == item.id ? item.images : item.image" mode="">
						</image>
						<text>{{ item.text }}</text>
					</view>
				</view>
			</view>
		</u-modal>
		<!--  -->
		<u-popup :show="fangshow" mode="center" @close="fangshow = false" :round="20">
			<view
				style="width: 80%;height: 380rpx;padding: 20px 0;border-radius: 20rpx;margin: 0 auto;box-sizing: border-box;">
				<h3 style="width: 100%; text-align: center; font-weight: 600">
					创建房间
				</h3>
				<view class="choose-box">
					<u--form labelPosition="left">
						<!-- 名称-->
						<u-form-item borderBottom>
							<view class="box-flex">
								<span style="margin-right: 10rpx">
									房间名称
									<span style="color: red">*</span>
								</span>
								<u--input inputAlign="right" v-model="userInfo.name" disabledColor="#ffffff"
									placeholder="请选择输入房间名称" border="none"></u--input>
								<!-- <span><u-icon slot="right" name="arrow-right"></u-icon></span> -->
							</view>
						</u-form-item>
						<!-- 名称-->
						<u-form-item borderBottom>
							<view class="box-flex">
								<span style="margin-right: 10rpx">
									楼层号
									<span style="color: red">*</span>
								</span>
								<u--input inputAlign="right" v-model="userInfo.floor_no" disabledColor="#ffffff"
									placeholder="请选择输入楼层号" border="none"></u--input>
								<!-- <span><u-icon slot="right" name="arrow-right"></u-icon></span> -->
							</view>
						</u-form-item>
						<!-- 名称-->
					</u--form>
					<view
						style="width: 200rpx;height: 80rpx;margin-top: 30rpx;border-radius: 20rpx;color: #fff;display: flex;justify-content: center;align-items: center;background-color: #f35902;"
						@tap="tijiao">
						确定
					</view>
				</view>
			</view>
		</u-popup>
		<!-- 悬浮球 -->
		<!-- <duifloatball v-if="shouw" slotsDirection="right" nearEdgeDirection="right" :nearEdgeIndent="true" @touchFunc="touchFunc">
		</duifloatball> -->
	</view>
</template>

<script>
import duifloatball from "./duifloatball.vue";
import {
	mapMutations,
	mapActions,
	mapState,
	mapGetters
} from "vuex";
import {
	buildinglist,
	stat,
	optionlist,
	setstatus,
	buildingdown,
	buildingup,
	buildingaddroom,
	roomDelete
} from "@/api/landlord.js";
export default {
	components: {
		duifloatball,
	},
	data() {
		return {
			dataForm: null,
			fangshow: false,
			stateindex: 0,
			shouw: false,
			stateShow: false,
			keyword: "",
			show: false,
			buildinglists: [],
			userInfo: {
				build_id: "",
				floor_no: "",
				name: "",
			},
			selectBuildingsName: "选择区域",
			buildingsList: [
				[]
			],
			statdata: {
				not_rented: 0,
				publish: 0,
				rate: "0%",
				rented: 0,
			},
			roomsid: null,
			dataList: ["创建房源", "修改状态"],
			chooseList: [{
				id: 2,
				image: "/pages-landlord/static/images/fabu_mian.png",
				images: "/pages-landlord/static/images/fabu_mian1.png",
				text: "完善上架",
			},
			{
				id: 3,
				image: "/pages-landlord/static/images/yiqianyue.png",
				images: "/pages-landlord/static/images/yiqianyue1.png",
				text: "签约出租",
			},
			// {
			// 	id: 4,
			// 	image: "/pages-landlord/static/images/fabu_mian.png",
			// 	images: "/pages-landlord/static/images/fabu_mian1.png",
			// 	text: "上架房源",
			// },
			{
				id: 5,
				image: "/pages-landlord/static/images/xiajia.png",
				images: "/pages-landlord/static/images/xiajia1.png",
				text: "下架房源",
			},
			{
				id: 6,
				image: "/pages-landlord/static/images/xiajia.png",
				images: "/pages-landlord/static/images/xiajia1.png",
				text: "删除房源",
			}
			],
			tabbarCollapsed: false,
			searchzoom: "",
		};
	},
	computed: {
		// ...mapGetters(['isLogin', 'userInfo']),
	},
	onPullDownRefresh() { },

	onShow() {
		// console.log(888);
	},
	onHide() { },
	onLoad(options) {
		this.init();
	},
	mounted() {
		this.init();
		let data = uni.getStorageSync("userinfo");
		if (data && data.status == 1) {
			this.shouw = true;
		} else {
			this.shouw = false;
		}
	},
	methods: {
		toggleCollapse(idx) {
			this.buildinglists[idx].collapsed = !this.buildinglists[idx].collapsed;
		},
		toggleCollapse1(items, indexs) {
			items.collapsed = !items.collapsed;
			this.$forceUpdate()
		},
		tijiao() {
			console.log(this.userInfo);
			if (this.userInfo.name == "") {
				uni.showToast({
					title: "请输入房间名称",
					icon: "none",
				});
				return;
			}
			if (this.userInfo.name == "") {
				uni.showToast({
					title: "请输入楼层",
					icon: "none",
				});
				return;
			}
			buildingaddroom(this.userInfo).then((res) => {
				uni.showToast({
					title: res.data.msg,
				});
				this.init();
				this.fangshow = false;
			});
		},
		fangclick(e) {
			// this.userInfo.build_id = e.id;
			// this.fangshow = true;
			// console.log(e);
			uni.navigateTo({
				url: '/pages-landlord/room-manage/add-room?build_id=' + e.id + '&name=' + e.name +
					'&zone=' + e.zone + '&zone_id=' + e.zone_id
			})
		},
		// 确认修改
		// okclick() {
		// 	let that = this
		// 	if (this.stateindex == 2) {
		// 		uni.showModal({
		// 			content: '修改至待签约将清除租客信息,是否修改?',
		// 			success(res) {
		// 				if (res.confirm) {
		// 					that.changeSelectState()
		// 				}
		// 			}
		// 		})
		// 	} else {
		// 		this.changeSelectState()
		// 	}
		// },
		// 选择状态
		Selected(e) {
			this.stateindex = e;
			this.changeSelectState()
		},
		changeSelectState() {
			let that = this
			// if (this.stateindex == 2 || this.stateindex == 3) {
			// 	// 修改状态
			// 	setstatus({
			// 		status: this.stateindex,
			// 		room_id: this.dataForm.room_id,
			// 	}).then((res) => {
			// 		uni.$u.toast(res.data.msg);
			// 		this.stateShow = false;
			// 		this.init();
			// 	});
			// } else
			if (this.stateindex == 2) {
				this.$Tips('/pages-landlord/room-manage/room-detail?room_id=' + this.dataForm.id)
				this.stateShow = false;
			} else if (this.stateindex == 3) {
				this.$Tips('/pages-landlord/room-manage/rental-registration?room_id=' + this.dataForm.id)
				this.stateShow = false;
			} else if (this.stateindex == 5) {
				uni.showModal({
					content: "是否下架房源",
					success(res) {
						if (res.confirm) {
							// 下架
							buildingdown({
								room_id: that.dataForm.id,
							}).then((res) => {
								uni.$u.toast(res.data.msg);
								that.stateShow = false;
								that.init();
							});
						}
					}
				})
			} else if (this.stateindex == 4) {
				uni.showModal({
					content: "是否上架房源",
					success(res) {
						if (res.confirm) {
							//上架
							buildingup({
								room_id: that.dataForm.id,
							}).then((res) => {
								uni.$u.toast(res.data.msg);
								that.stateShow = false;
								that.init();
							});
						}
					}
				})
			} else if (this.stateindex == 6) {
				uni.showModal({
					confirmColor: "#FE4F04",
					content: "确定删除该房源吗？",
					success(res) {
						if (res.confirm) {
							roomDelete({
								id: that.dataForm.id
							}).then(res => {
								uni.showModal({
									title: '提示',
									content: '删除成功！',
									showCancel: false,
									success: ({ confirm, cancel }) => {
										that.stateShow = false;
										that.init();
									}
								})
							});
						}
					}
				})
			}
		},
		// 修改状态
		stateShowclick(item) {
			this.stateindex = item.status;
			this.dataForm = item;
			this.stateShow = true;
		},
		// 菜单
		roomsclick(e) {
			if (e == this.roomsid) {
				this.roomsid = null;
			} else {
				this.roomsid = e;
			}
		},
		// 选择
		buildingsListclick(e) {
			this.searchzoom = e.value[0];
			if (e.value[0].label == "全部") {
				this.selectBuildingsName = "选择楼栋";
				this.searchzoom = "";
			}
			this.initdata();
			this.selectBuildingsName = e.value[0].label;
			this.show = false;
		},
		optionlistclick() {
			optionlist({}).then((res) => {
				this.buildingsList[0] = [{
					id: 0,
					label: "全部",
				},];
				let list = [];
				list = Object.entries(res.data.data).map(([key, value]) => {
					return {
						id: parseInt(key),
						label: value,
					};
				});
				list.forEach((res) => {
					this.buildingsList[0].push(res);
				});
				this.show = true;
			});
		},
		// 悬浮球点击
		touchFunc(e) {
			if (e.iSNearEdge) {
				// console.log(e);
				this.jump("/pages-landlord/landlord/buildings");
			}
		},

		change1(e) {
			console.log(e);
		},
		// 初始化
		init() {
			this.initdata();
		},
		denglu() {
			this.$store.dispatch("showAuthModal", "1233");
		},
		Searchs() {
			this.Search({
				keyword: this.keyword,
			});
		},
		Search(e) {
			// 房源列表
			buildinglist(e).then((res) => {
				this.buildinglists = this.formatBuildingArray(res.data.data.data)
			});
			//  获取房东房源统计
			stat(e).then((res) => {
				this.statdata = res.data.data;
			});
		},
		formatBuildingArray(dataArray) {
			return dataArray.map(building => {
				// 创建建筑数据的深拷贝
				const formattedBuilding = JSON.parse(JSON.stringify(building));

				// 分组房间数据
				const groupedRooms = formattedBuilding.rooms.reduce((acc, room) => {
					const floor = room.floor_no;
					if (!acc[floor]) {
						acc[floor] = {
							list: [],
							floor_no: floor,
							collapsed: true
						};
					}
					acc[floor].list.push(room);
					return acc;
				}, {});
				// 添加分组数据和collapsed属性
				formattedBuilding.roomGroups = Object.values(groupedRooms);
				formattedBuilding.collapsed = true;

				return formattedBuilding;
			});
		},
		initdata() {
			// 房源列表
			buildinglist({
				zone_id: this.searchzoom ?
					this.searchzoom.id : '',
			}).then((res) => {
				this.buildinglists = this.formatBuildingArray(res.data.data.data)
			});
			//  获取房东房源统计
			stat().then((res) => {
				this.statdata = res.data.data;
			});
		},
		// 路由跳转
		jump(path, parmas) {
			console.log(path);
			uni.navigateTo({
				url: path,
			});
			// this.$Router.push({
			// 	path: path,
			// 	query: parmas
			// });
		},
	},
};
</script>

<style lang="scss" scoped>
.box-flex {
	display: flex;
	width: 100%;
	justify-content: space-between;
	align-items: center;
}

.choose-box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	height: 200rpx;
	width: 100rpx;
	width: 100%;
	margin: 0 auto;

	.listbox {
		border-radius: 40rpx;
		background-color: #f5f6fa;
		width: 45%;
		box-sizing: border-box;
		margin: 0 10rpx;
		padding: 20rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;

		.choose-img {
			width: 32rpx;
			height: 32rpx;
			box-sizing: border-box;
			margin-right: 15rpx;
		}
	}

	.listbox1 {
		background-color: #fe4f04;
		color: #fff;
	}
}

.floorinformation {
	background-color: #fff;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 20rpx;

	.floorinformation-top {
		justify-content: space-between;

		.floorinformation-topSize {
			font-size: 26rpx;
			color: #898887;
		}

		.iccon-box {
			margin: 0 10rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			// border: 1rpx solid red;
			background-color: #f5f6fa;
		}
	}

	.floorinformation-floor {
		border-top: 1rpx solid #f1f1f1;
		margin-top: 20rpx;
		box-sizing: border-box;
		padding-top: 30rpx;

		.top {
			font-weight: 600;
			justify-content: center;
			margin-bottom: 20rpx;
		}

		.box {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			grid-gap: 10rpx;

			.box-sex {
				margin-bottom: 12rpx;
				box-sizing: border-box;
				padding: 16rpx;
				position: relative;
				background: #F8F8F8;
				border-radius: 12rpx;
				border: 1rpx solid #D1D2D4;
				text-align: center;

				.Information {
					font-size: 30rpx;
					color: #606060;
					// font-size: 40rpx;
					font-weight: 600;
					text-align: center;
				}

				.Information-name {
					margin-top: 10rpx;
					font-size: 20rpx;
					color: #606060;
					text-align: center;
				}
			}

			.up {
				background: rgba(254, 79, 4, 0.1);
				border: 1rpx solid rgba(254, 79, 4, 0.65);

				.Information {
					color: #FE4F04;
				}

				.Information-name {
					color: #FE4F04;
				}
			}

			.sign {
				ackground: rgba(129, 179, 54, 0.1);
				border: 1rpx solid #81B336;

				.Information {
					color: #81B336;
				}

				.Information-name {
					color: #81B336;
				}
			}
		}
	}
}

.u-content-nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	-webkit-border-radius: 20rpx;
	-moz-border-radius: 20rpx;
	border-radius: 10rpx;

	.u-content-nav-title {
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 24rpx;
		color: #782400;
		line-height: 34rpx;
		text-align: left;
		font-style: normal;
		padding-bottom: 10rpx;
	}

	.u-content-nav-money {
		font-family: PingFangHK, PingFangHK;
		font-weight: 500;
		font-size: 32rpx;
		color: #fe4f04;
		line-height: 44rpx;
		text-align: left;
		font-style: normal;
	}
}

.search-box,
.content-box {
	width: 96%;
	margin: 0 auto;
}

.buildings-button {
	font-family: PingFangSC, PingFang SC;
	font-weight: 500;
	font-size: 26rpx;
	margin-top: 20rpx;
	height: 80rpx;
	border-radius: 10rpx;
	box-sizing: border-box;
	padding: 15rpx 25rpx;
	background-color: #fff;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.u-w-100s {
	width: 100%;
}

.uni-ec-canvas {
	width: 100%;
	height: 400rpx;
	display: block;
}

.uni-ec-canvas-bing {
	width: 100%;
	height: 200rpx;
	display: block;
}

page {
	background: #f5f6fa;
}

.kehu-item {
	border-radius: 20rpx;
	width: 100%;

	.swipers {
		width: 100%;
	}
}

.topic {
	background: #f5f5f5;
	border-radius: 20rpx;

	.topic_left {
		width: 70rpx;
		height: 50rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.topic_right {
		width: 96%;

		.title_right {
			.point {
				width: 10rpx;
				height: 10rpx;

				border-radius: 50%;
				background: #fa3e3e;
			}

			.arrow-right {
				width: 20rpx;
				height: 30rpx;
			}
		}
	}
}

.message-list {
	background: linear-gradient(180deg,
			rgba(255, 255, 255, 0.9) 0%,
			rgba(255, 255, 255, 0.9) 100%);
	box-shadow: 0px 2px 4px 0px rgba(255, 255, 255, 0.9);
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
	padding: 20rpx 0rpx 40rpx 30rpx;

	.message-item {
		width: 100%;

		.tool-icon {
			width: 140rpx;
			height: 140rpx;
		}

		.message-name {
			width: calc(100% - 190rpx);
			border-bottom: 2rpx solid #eeeeee;
			height: 140rpx;
		}
	}
}

.u-content {
	border-radius: 20rpx;
	padding: 40rpx 30rpx 40rpx 30rpx;
	font-size: 24rpx;
	color: #333;
	z-index: 3;
	position: relative;
	background: linear-gradient(180deg,
			#fff5f1 0%,
			rgba(255, 255, 255, 0.9) 100%);
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(53, 110, 253, 0.05);
	border-radius: 32rpx;
	border: 2rpx solid #ffffff;
	margin-top: 40rpx;

	.u-content-nav {
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		-webkit-border-radius: 20rpx;
		-moz-border-radius: 20rpx;
		border-radius: 20rpx;

		.u-content-nav-title {
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			font-size: 24rpx;
			color: #782400;
			line-height: 34rpx;
			text-align: left;
			font-style: normal;
			padding-top: 10rpx;
		}

		.u-content-nav-icon {
			width: 120rpx;
			height: 120rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	}

	.u-content-time {
		text-align: center;
		overflow: hidden;

		.avtar-url {
			/* 其他样式 */
			width: 140rpx;
			padding: 0px 5rpx;
			height: 140rpx;
			background: #faf1ed;
			border-radius: 50%;
			border: 1rpx solid #faf1ed;
			display: flex;
			font-weight: 700;
			justify-content: center;
			align-items: center;
		}
	}
}

.u-content-grid {
	padding: 32rpx 0 2rpx;
	background: #fff;
	box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(203, 253, 53, 0.05);
	border-radius: 16rpx;
	border: 2rpx solid #ffffff;
	margin-top: 20rpx;
	z-index: 2;
	position: relative;

	.swiper {
		height: 210rpx;
	}

	.u-content-grid-img {
		width: 86rpx;
		height: 113rpx;
		padding-bottom: 16rpx;
	}

	.grid-text {
		font-size: 24rpx;
		color: #434343;
		padding: 0rpx 0 38rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
}

.pay-item {
	width: 25%;
}

.top-yuangong {
	position: relative;

	.top-yuangong-item {
		width: 25%;
	}

	.top-icon {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 24%;
		left: -2%;

		image {
			width: 100%;
			height: 100%;
		}
	}

	.topnum {
		font-size: 30rpx;
		color: #333;
	}

	.topname {
		font-size: 24rpx;
		margin-top: 14rpx;
		color: #999;
	}

	.tool-icon {
		width: 80rpx;
		height: 80rpx;
	}
}
</style>